<!--
 * @Description:
 * @Author: william
 * @Date: 2025-02-05 09:08:10
 * @LastEditors: william
 * @LastEditTime: 2025-02-17 14:07:31
-->
<template>
  <el-tooltip :content="$t('public.theme')" placement="right" effect="light">
    <div class="svg-wrap right-menu-item" @click="changeTheme">
      <svg-icon class-name="svg-icon" icon-class="theme" />
    </div>
  </el-tooltip>
</template>

<script setup>
const appStore = useAppStore()
const theme = computed(() => appStore.theme)

const changeTheme = () => {
  appStore.setTheme(theme.value === 'theme-blue' ? 'theme-white' : 'theme-blue')
}

const themeMedia = window.matchMedia('(prefers-color-scheme: light)')
const handleThemeChange = e => {
  const newTheme = e.matches ? 'theme-white' : 'theme-blue'
  appStore.setTheme(newTheme)
}

// 动态监听浏览器的主题变化
onMounted(() => {
  themeMedia.addEventListener('change', handleThemeChange)
})

onBeforeUnmount(() => {
  themeMedia.removeEventListener('change', handleThemeChange)
})
</script>
